<template>
    <div class="">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="1000px"
                :close-on-click-modal=false
                @close="close"
        >
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.trim="form.sort" autocomplete="off" type="number" placeholder="请输入排序"></el-input>
                </el-form-item>
<!--                <el-form-item label="资讯类型" prop="type" v-show="this.title=='添加'" :required="true">-->
<!--                    <el-radio v-model="form.type" label="1">前台资讯</el-radio>-->
<!--                    <el-radio v-model="form.type" label="2">后台资讯</el-radio>-->
<!--                </el-form-item>-->
                <el-form-item label="资讯标题" prop="title" :required="true">
                    <el-input v-model.trim="form.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
                </el-form-item>
                <el-form-item label="资讯简介" prop="introduction" v-if="form.type=='2'">
                    <el-input v-model.trim="form.introduction" autocomplete="off" type="textarea"
                              placeholder="请输入资讯简介"></el-input>
                </el-form-item>
              <el-form-item label="资讯图片">
                <div class="uploadSource bor_de rel flex" v-if="form.icon">
                  <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                    <i class="el-icon-check" ref="imgicon1"></i>
                    <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                  </label>
                  <img :src="form.icon" @click="test(1)" class="wid" />
                </div>
                <div class="uploadSource flex-center curs" v-else @click="test(1)">
                  <i class="el-icon-plus fon_40 color_d9"></i>
                </div>
                <div class="yb_margin">建议尺寸：720*180</div>
              </el-form-item>
                <el-form-item label="资讯详情" prop="body">
<!--                    <vab-quill v-model="form.body" :min-height="400"></vab-quill>-->
                    <baidu-ueditor :content='form.body' @ueditor='getUeditor'></baidu-ueditor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
          <attachment-img ref="img1" type="img" :type2="storeId" @attachment="imgadd1"></attachment-img>
        </el-dialog>
    </div>
</template>

<script>
    import vabQuill from "@/plugins/vabQuill";
    import baiduUeditor from "@/plugins/baidu-ueditor";
    import attachmentImg from '@/plugins/attachment-img';
    import {informationSave} from "@/api/setup";

    export default {
        components: {vabQuill,baiduUeditor,attachmentImg},
        name: "goodlistedit",
        created() {
        },
        data() {
            return {
                form: {
                    id: '',
                    sort: "1",
                    title: "",
                    body: "",
                    type: "2",
                    icon: '',
                    introduction: "",
                },
                title: "",
                dialogFormVisible: false,
            }
        },
        methods: {
            showEdit(row) {
                if (!row) {
                    this.title = "添加";
                } else {
                    this.title = "编辑";
                    this.form = Object.assign({}, row);
                }
                this.dialogFormVisible = true;
            },
            onSearch() {
                this.fetchData();
            },
            getUeditor(content) {
                this.form.body = content
            },
          enter(i = 0) {
            this.$refs['imgicon' + i].style.display = 'none';
          },
          leave(i = 0) {
            this.$refs['imgicon' + i].style.display = 'inline-block';
          },
          test(i = 0) {
            console.log(this.$refs, i);
            this.$refs['img' + i].dialogVisible = true;
          },
          imgadd1(url) {
            this.form.icon = url.str;
          },
          deleteMultiImage(item, index, type) {
            //typem没传是单图multigraph多图；index上传图片组件排序
            Array.prototype.remove = function (val) {
              var index = this.indexOf(val);
              if (index > -1) {
                this.splice(index, 1);
              }
            };
            if (type == 'multigraph') {
              switch (index) {
                case 2:
                  this.form2.environment.remove(item);
                  break;
              }
            } else {
              switch (index) {
                case 1:
                  this.form.icon = '';
                  break;
              }
            }
          },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            save() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.type = 2
                        const {msg} = await informationSave(this.form);
                        this.$baseMessage(msg, "success");
                        this.$emit("fetchData");
                        this.close();
                    } else {
                        return false;
                    }
                });
            },
        }
    };
</script>
<style lang="scss" scoped>
    .edui-editor {
        width: 826px !important;
    }
</style>
